<template>
     <ul :class="{'menuBox':true,'nolist':lists.length==0}" >
    <!-- <ul :class="{'menuBox'+styleName:true,'nolist':lists.length==0}" > -->
        <li v-for="dt in lists" :key="dt.path || dt.id" :class="{'singleTxt':!dt.num}">
            <router-link replace v-if="dt.path" :to="dt.path">
                <b v-if="dt.num">{{dt.num}}</b>
                <p>{{dt.name}}</p>
            </router-link>
            <a v-else :class="{'router-link-active':dt.id==index,'disabled':dt.disabled}" @click="setTab(dt.id)">
                <b v-if="dt.num">{{dt.num}}</b>
                <p>{{dt.name}}</p>
            </a>
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        modelValue:String,
        lists:Array,
        styleType:Number // 指定样式
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            index:'',
            styleName:''
        })

        onMounted(()=>{
            if(props.modelValue){
                state.index = props.modelValue
            }
            if(props.styleType){
                state.styleName = 'menuBox'+props.styleType
            }
        })

        const setTab = (id)=>{
            if(state.index != id){
                state.index = id
                context.emit('update:modelValue', id)
                context.emit('change', id)
            }
            context.emit('onClick', id)
        }

        return{
            ...toRefs(state),
            setTab
        }
    }
}
</script>

<style lang="scss" scoped>
    .menuBox{
        display: flex;
        justify-content: center;
        list-style: none;
        width: 200px;
        height: 100%;
        flex-flow: column;
        padding: 0 30px 0 0;
        margin: 0;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        li{
            margin: 0 0 15px 0;
            &.singleTxt{
                a{
                    padding: 0;
                    p{
                        display: flex;
                        padding: 0;
                        margin: 0;
                        height: 100%;
                        height: 100%;
                        align-items: center;
                        justify-content: center;
                        line-height: 30px;
                    }
                }
            }
            a{
                display: block;
                height: 100px;
                line-height: 34px;
                text-align: center;
                font-size: 22px;
                color: #C1D0F2;
                font-weight: 500;
                background: url(/images/lmenu1.png) left top no-repeat;
                background-size: 100% 100%;
                padding: 18px 0 0 0;
                &.router-link-active,&.router-link-exact-active{
                    background-image: url(/images/lmenu2.png);
                    color: #67F8FF;
                    font-weight: 600;
                }
                b{
                    font-size: 30px;
                }
                p{
                    padding: 0;
                    margin: 0;
                }
            }
        }
        &.menuBox2{
            width: 105px;
            padding-top: 30px;
            li{
                a{
                    height: 160px;
                    background-image: url(/images/hm1.png);
                    //color: #67F8FF;
                    &.router-link-active,&.router-link-exact-active{
                        background-image: url(/images/hm2.png);
                    }
                    &.disabled{
                        background-image: url(/images/hm3.png);
                        color: rgba(255,255,255,0.3);
                    }
                    p{
                        //writing-mode:vertical-rl;
                        font-size: 30px;
                        white-space:nowrap;
                        transform: rotate(90deg);
                    }
                }
            }
            
        }
    }
    .menuBox.nolist{
        width: 120px;
    }
</style>